<div class="form-group">
    {{--<label for="" class="col-md-3 control-label"></label>--}}
    <div class="col-md-12">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#group" aria-controls="group" role="tab" data-toggle="tab">基础信息</a>
            </li>
            <li role="presentation">
                <a href="#groupAttr" aria-controls="groupAttr" role="tab" data-toggle="tab">属性列表</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="group">
                <div class="">
                    @if(auth()->user()->id === 1)
                        <div class="form-group">
                            <label for="tagUid" class="col-md-3 control-label">所属用户</label>
                            <div class="col-md-5">
                                <select class="form-control" name="uid" id="tagUid"
                                        onchange="$('#username').val($(this).find('option:selected').text());">
                                    @foreach ($userList as $id=>$name)
                                        <option value="{{ $id }}" @if ($id === $uid) selected="selected" @endif>{{ $name }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" id="username" name="username" value="{{ empty($username) ? $userList[1] : $username}}">
                            </div>
                        </div>
                    @else
                        <input type="hidden" id="uid" name="uid" value="{{auth()->user()->id}}">
                        <input type="hidden" id="username" name="username" value="{{auth()->user()->name}}">
                    @endif
                    <div class="form-group">
                        <label for="tagTitle" class="col-md-3 control-label">分组名称</label>
                        <div class="col-md-5">
                            <input type="text" class="form-control" name="title" id="tagTitle" value="{{ $title }}"
                                   @if (empty($template)) onblur="$('#template').val($('#tagTempId').find('option:selected').text())" @endif autofocus>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tag" class="col-md-3 control-label">分组目录</label>
                        <div class="col-md-5">
                            <input type="text" class="form-control" name="directory" id="tag" value="{{ $directory }}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tagGoToType" class="col-md-3 control-label">跳转类型</label>
                        <div class="col-md-2">
                            <select class="form-control" name="go_to_type" id="tagGoToType"
                                    onchange="$('#go_to_type_title').val($(this).find('option:selected').text());">
                                @foreach (config('app.go_to_type') as $key => $name)
                                    <option value="{{ $key }}" @if ($key === $go_to_type) selected="selected" @endif>{{ $name }}</option>
                                @endforeach
                            </select>
                            <input type="hidden" id="go_to_type_title" name="go_to_type_title"
                                   value="{{ empty($go_to_type_title) ? config('app.go_to_type')[1] : $go_to_type_title}}">
                        </div>


                    </div>

                    <div class="form-group">
                        <label for="tagTargetGid" class="col-md-3 control-label">跳转目标</label>
                        <div class="col-md-2">
                            <select class="form-control" name="target_gid" id="tagTargetGid"
                                    onchange="$('#target_gname').val($(this).find('option:selected').text());">
                                <option value="0">NULL</option>
                                @foreach ($groupList as $gid=>$title)
                                    <option value="{{ $gid }}" @if ($gid === $target_gid) selected="selected" @endif>{{ $title }}</option>
                                @endforeach
                            </select>
                            <input type="hidden" id="target_gname" name="target_gname"
                                   value="{{ empty($target_gname) ? 'NULL' : $target_gname}}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tagTempId" class="col-md-3 control-label">渲染模板</label>
                        <div class="col-md-2">
                            <select class="form-control" name="tpl_id" id="tagTempId"
                                    onchange="$('#template').val($(this).find('option:selected').text());" on="alert(1)">
                                @foreach ($templateList as $tplKey=>$tplName)
                                    <option value="{{ $tplKey }}"
                                            @if ($tplKey === $tpl_id) selected="selected" @endif>{{ $tplName }}</option>
                                @endforeach
                            </select>
                            <input type="hidden" id="template" name="template" value="{{$template}}">
                        </div>
                        <div class="col-md-2 "><a href="/admin/templates/create" class="control-label">添加模板</a></div>
                    </div>

                    @if(!empty($template))
                        <div class="form-group">
                            <label for="unCover" class="col-md-3 control-label">是否覆盖所在域名对应配置</label>
                            <div class="col-md-5 radio">
                                <label>
                                    <input type="radio" name="cover" id="unCover" value="unCover" checked="checked"> 不覆盖
                                </label>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <label>
                                    <input type="radio" name="cover" id="cover" value="cover"> 覆盖
                                </label>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="groupAttr">
                <div class="">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">

                                @include('admin.partials.errors')
                                @include('admin.partials.success')
                                <div class="box-body">
                                    <table id="tags-table" class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th data-sortable="false" class="hidden-sm "><label><input id="all" type="checkbox">
                                                    全选</label>&nbsp;&nbsp; <a href="#" onclick="batchDel()" class="text-danger">删除</a>
                                            </th>
                                            <th data-sortable="false" class="hidden-sm">序号</th>
                                            <th class="hidden-sm">所属用户</th>
                                            <th class="hidden-sm">所属分组</th>
                                            <th class="hidden-sm">属性类型</th>
                                            <th class="hidden-md">属性名称</th>
                                            <th class="hidden-md">属性值</th>
                                            <th class="hidden-md">调用标签</th>
                                            <th data-sortable="false">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="modal-delete" tabIndex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        ×
                                    </button>
                                    <h4 class="modal-title">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <p class="lead">
                                        <i class="fa fa-question-circle fa-lg"></i>
                                        确认要删除这个属性吗?
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <form class="deleteForm" method="POST" action="/admin/groupAttr">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="submit" class="btn btn-danger">
                                            <i class="fa fa-times-circle"></i>确认
                                        </button>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>{{--删除--}}
                    <div class="modal fade" id="modal-batch-del" tabIndex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        ×
                                    </button>
                                    <h4 class="modal-title">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <p class="lead">
                                        <i class="fa fa-question-circle fa-lg"></i>
                                        确认要删除这些分组属性吗?
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <form class="batchDelForm" method="POST" action="/admin/groupAttr">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="submit" class="btn btn-danger">
                                            <i class="fa fa-times-circle"></i>确认
                                        </button>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>{{--批量删除--}}
                </div>{{--分组属性列表--}}
            </div>
        </div>
    </div>
</div>

@section('js')
    <script>
        $(function () {
            var table = $("#tags-table").DataTable({
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                order: [[1, "desc"]],
                serverSide: true,
                ajax: {
                    url: '/admin/groupAttr/index',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    data: function ( d ) {
                        //添加额外的参数传给服务器
                        d.gid = "{{$groupId}}";
                    },
                },
                "columns": [
                    {"data": "action"},
                    {"data": "id"},
                    {"data": "username"},
                    {"data": "gname"},
                    {"data": "type"},
                    {"data": "name"},
                    {"data": "value"},
                    {"data": "call_tag"},
                    {"data": "action"}
                ],
                columnDefs: [
                    {
                        'targets': -1, "render": function (data, type, row)
                    {
                        var caozuo = '<a style="margin:3px;" href="/admin/groupAttr/' + row['id'] + '/edit" class="X-Small btn-xs text-success "><i class="fa fa-edit"></i> 编辑</a>';
                        caozuo += '<a style="margin:3px;" href="#" attr="' + row['id'] + '" class="delBtn X-Small btn-xs text-danger "><i class="fa fa-times-circle-o"></i> 删除</a>';
                        return caozuo;
                    }
                    },
                    {
                        'targets': 0, "render": function (data, type, row) {
                        var caozuoCB = '<div class="checkbox hidden-sm"><label><input class="itemCB" name="itemCB[]" type="checkbox" value="' + row['id'] + '"></label></div>';
                        return caozuoCB;
                    }
                    }
                ]
            });

            table.on('preXhr.dt', function () {
                loadShow();
            });

            table.on('draw.dt', function () {
                loadFadeOut();
            });

            table.on('order.dt search.dt', function () {
                table.column(1, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();

            $("table").delegate('.delBtn', 'click', function () {
                var id = $(this).attr('attr');
                $('.deleteForm').attr('action', '/admin/groupAttr/' + id);
                $("#modal-delete").modal();
            });

        });
    </script>

@stop




